<template>
  <div class="wrapper">
    <ul class="products">
      <li
        v-for="item in goodsList.slice(0, 6)"
        :key="item.id"
        @click="toProductDetail(item.id)"
      >
        <img :src="item.list_pic_url" alt="" />
        <div class="van-ellipsis">{{ item.name }}</div>
        <div class="price">{{ item.retail_price }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['goodsList'],
  data() {
    return {}
  },
  methods: {
    toProductDetail(id) {
      this.$router.push(`/productdetail?id=${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  overflow-y: scroll;
}
.products {
  display: flex;
  padding: 0.1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    background: #fff;
    width: 49%;
    text-align: center;
    margin-bottom: 0.1rem;
    padding-bottom: 0.05rem;
    img {
      width: 100%;
    }
  }
}
</style>
